<template>
	<view>
		<view class="banner">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="item in bannerList">
						<view class="swiper-item"><image :src="$enviorment + item.picture" mode="widthFix" style="width: 100%;"></image></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="tc_list">
			<view class="title">超值套餐</view>
			<view class="mealCon">
				<view class="flex-item" v-for="item in MealsList" @click="toProductDetail(item.item_id)">
					<image class="img" :src="$enviorment + item.item_picture"  mode="widthFix"></image>
					<view class="name">{{item.item_name}}</view>
					<view class="money">
						<text>￥{{item.item_price_zfb}}</text>
						<text>￥{{item.item_price_shichang}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shop_list">
			<view class="title">
				附近商家
			</view>
			<view class="item clearfix" @click="toShopDetail(item.mendian_id,item.distanceFixed)" v-for="item in nearbyShopList">
				<view class="left">
					<image :src="$enviorment + item.mendian_picture"  mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.mendian_name}}
					</view>
					<view class="label_box">
						<text v-if="item.mendian_tese">{{item.mendian_tese}}</text>
					</view>
					<view class="address uni-ellipsis">
						{{item.mendian_address}}
					</view>
					<view class="info">
						<text>
							<image src="../static/index_01.png" mode="widthFix" style="width: 18rpx;height: 18rpx;"></image>{{item.num_dingdan}}单
						</text>
						<text>
							<image src="../static/index_02.png" mode="widthFix" style="width: 22rpx;height: 18rpx;"></image>{{item.num_pingjia}}评价
						</text>
						<text>
							<image src="../static/index_03.png" mode="widthFix" style="width: 18rpx;height: 22rpx;position: relative;top: 4rpx;"></image>{{item.distanceFixed}}km
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="modal" v-if="noCode || noPhone" @click="hideModal"></view>
		<view class="power" v-if="noCode || noPhone">
			<button class="sq" open-type="getAuthorize" @getAuthorize="onalipaySignin" v-if="noCode"
			 onError="onAuthError" scope='userInfo'
			>
			    会员基础信息授权
			</button>
			<!-- <button v-if="noPhone" class="getPhone" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
			</view>
		</view>
		
		
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				showSQ:true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList:[],
				$enviorment:this.$enviorment,
				MealsList:[],
				nearbyShopList:[],
				userInfo:{
					},
				nowCity:'',
				nowLongitude:'119.950218',
				nowLatitude:'31.835252',
				noCode:true,
				noPhone:false,
			}
		},
		onLoad(){
			  this.getBannerList();
			  this.getMeals();
			  
			  
		},
		onShow(){
			this.userInfo = uni.getStorageSync('userInfo') || {};
			var userId = uni.getStorageSync('userId');
			var phone = uni.getStorageSync('phone');
			this.noCode = !userId;
			// this.noPhone = !phone;
			var that = this;
			uni.getLocation({
			    success: (res)=> {
					console.log(res);
					that.nowLongitude = res.longitude;
					that.nowLatitude  = res.latitude;
					if(this.userInfo.city){
						that.getNearbyShopList();
					}
			    },
				fail: function (res) {
					that.getNearbyShopList();
			    },
			});
		},
		methods: {
			// 获取banner图
			getBannerList(){
				this.$get('api_home_picture.ashx',{},(res)=>{
					this.bannerList = res.data;
				})
			},
			//获取超值套餐
			getMeals(){
				this.$get('api_home_items.ashx',{},(res)=>{
					this.MealsList = res.data;
					console.log(res)
				})
			},
			//点击套餐跳转到详情页
			toProductDetail(res){
				uni.navigateTo({
					url:'/pages/productDetail?id='+ res
				})
			},
			//点击门店跳转到详情页
			toShopDetail(res,way){
				uni.navigateTo({
					url:`/pages/shopDetail?id=${res}&way=${way}`
				})
			},
			//获取首页门店列表
			getNearbyShopList(){
				this.$get('api_home_mendian_list.ashx',{city:this.userInfo.city,Gpsx:this.nowLongitude,Gpxy:this.nowLatitude},(res)=>{
					if(res.data && res.data.length>0){
						this.nearbyShopList = res.data;
						this.nearbyShopList.forEach((item)=>{
							item.distanceFixed = (item.distance/1000).toFixed(2)
						})
					}
				})
			},
			//隐藏授权弹窗
			hideModal() {
				var that = this;
				uni.showModal({
					title:'提示',
					content:'若不授权则无法使用全部功能！',
					confirmText:'确定',
					cancelText:'取消',
					success(res) {
						if (res.confirm) {
							that.noCode = false;
							that.noPhone = false;
						} else if (res.cancel) {
							that.noCode = true;
							that.noPhone = true;
						}
						
					},
					fail() {
						
					},
					complete() {
						
					}
				})
				
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			},
			//授权
			onalipaySignin(res) {
				var that = this;
				uni.login({
					provider: 'alipay',
					success: function(loginRes) {
						console.log(loginRes); // 获取用户信息 
						uni.getUserInfo({
							provider: 'alipay',
							withCredentials:true,  
							success: (res)=> {
								 let userInfo = JSON.parse(res.response).response;
								 that.userInfo = userInfo;
								 uni.setStorageSync('userInfo', JSON.parse(res.response).response);
								 that.register(loginRes.authCode);
								 that.getNearbyShopList();
								 that.noCode = false;
								  console.log(userInfo)
							}
						});
					}
				});

			},
			register(authCode){
				this.$get('api_customer_register.ashx',{
					id:authCode,
					Pic:this.userInfo.avatar,
					Tel:this.userInfo.Tel,
					City:this.userInfo.city,
					Name:this.userInfo.nickName,
					Gpsx:this.nowLongitude || "",
					Gpsy:this.nowLatitude || "",
					// Tel:""
					},(res)=>{
					uni.setStorageSync('userId', res.data);
					console.log(res)
				})
			},
			decryptPhoneNumber(res){
				// console.log(res)
				var resData = JSON.parse(res.response);
				var phoneNumber = resData.response;
				uni.setStorageSync('phoneNumber', phoneNumber);
				this.noPhone = false;
				this.$get('customer_info.ashx',{
					id:uni.getStorageSync('authCode')
					},(res)=>{
					this.noPhone = !phone;
				})
			}
		}
	}
</script>

<style scoped>
	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-item image,uni-image {
		width: 750rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.mealCon {
		display: block;
		
	}
	.mealCon .flex-item {
		width: 204rpx;
		height: 298rpx;
		display: inline-block;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	
	.tc_list .flex-item {
		width: 33.3%;
		text-align: left;
	}

	.tc_list {
		padding: 15rpx 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}

	.tc_list .title {
		font-size: 30rpx;
	}

	.tc_list .img {
		width: 200rpx;
		height: 200rpx;
	}

	.tc_list .name {
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 22rpx;

	}

	.tc_list .money {
		font-size: 26rpx;
		color: #ff6010;

	}

	.tc_list .money text:last-child {
		margin-left: 20rpx;
		color: #999999;
		text-decoration: line-through;
	}

	.shop_list {
		background-color: #fff;
	}

	.shop_list .title {
		font-size: 30rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #E5E5E5;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.shop_list .item {
		padding: 20rpx;
		border-bottom: 1px solid #E5E5E5;
	}

	.shop_list .item .left {
		float: left;
	}

	.shop_list .item .left image {
		width: 165rpx;
		height: 135rpx;
	}

	.shop_list .item .right {
		float: left;
		width: calc(100% - 165rpx);
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.shop_list .item .right .name {
		font-size: 30rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.shop_list .item .right .label_box text {
		font-size: 22rpx;
		line-height: 24rpx;
		color: #fff;
		border-radius: 24rpx;
		margin-right: 20rpx;
		background-color: #ff8c36;
		padding: 0 20rpx;
	}
	.shop_list .item .right .label_box{
		height: 50rpx;
	}

	.shop_list .item .right .address {
		color: #999999;
		line-height: 24rpx;
		font-size: 24rpx;
	}

	.shop_list .item .right .info text {
		margin-right: 20rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.shop_list .item .right .info image {
		margin-right: 5rpx;
	}
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 100rpx;
		background: rgba(51,51,51,0.4);
		z-index: 1;
	}
	.power {
		width: 750rpx;
		height: 302rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}
	.power button.sq {
		width: 670rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		background: #008afd;
		border-radius: 40rpx;
		margin: 82rpx auto 34rpx;
		
	}
	.getPhone {
		color: rgb(51,51,51);
		font-size: 36rpx;
		text-align: center;
		border: none;
		background: none;
	}
	.getPhone::after {
		content: none;
	}
	.tc_list .flex-item {
		text-align: center;
	}
</style>
